<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="setting">
        <el-form ref="setting" :model="setting" :rules="settingRules" label-position="right" label-width="120px">
          <el-form-item label="网站标题" prop="title" style="width: 600px;">
            <el-input v-model="setting.title" />
          </el-form-item>
          <el-form-item label="网站描述" style="width: 600px;">
            <el-input v-model="setting.desc" type="textarea" :autosize="{ minRows: 5}" />
          </el-form-item>
          <el-form-item label="ICP备案号" prop="icp" style="width: 600px;">
            <el-input v-model="setting.icp" />
          </el-form-item>
          <el-form-item label="网站LOGO" prop="logo" style="width: 600px;">
            <image-upload v-model="setting.logo" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('setting')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="上传配置" name="upload">
        <el-form ref="upload" :model="upload" label-position="right" label-width="120px">
          <el-form-item label="存储位置" prop="title">
            <el-radio v-model="upload.type" label="local">本地</el-radio>
            <el-radio v-model="upload.type" label="other">其他</el-radio>
          </el-form-item>
          <el-form-item label="最大上传限制" prop="title" style="width: 390px;">
            <el-input v-model="upload.maxsize">
              <template slot="append">MB</template>
            </el-input>
            <div style="margin-top: 5px; font-size: 12px; color: #909399;">
              请注意不要超过服务器设置的最大上传限制。
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('upload')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { postSetting, getSetting } from '@/api/system'
import ImageUpload from '@/components/UploadImage/index.vue'

export default {
  components: { ImageUpload },
  data() {
    return {
      newlogo: '',
      activeTab: 'setting',
      setting: {
        title: '',
        desc: '',
        logo: '',
        icp: ''
      },
      settingRules: {
        title: [
          { required: true, message: '请输入网站标题', trigger: 'blur' },
          { max: 60, message: '最大长度不超过60个字符', trigger: 'blur' }
        ]
      },
      upload: {
        type: '',
        maxsize: 0
      }
    }
  },
  created() {
    this.getSetting()
    this.getUpload()
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this[formName].option_name = formName

          postSetting(this[formName]).then(res => {
            // 请求成功
            // this.getSetting()
            // 更新vuex中网站标题
            this.$store.dispatch('app/setPageTitle')
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab.name, event)
    },
    // 更新数据
    getSetting() {
      getSetting('setting').then(succ => {
        const { data } = succ
        this.$data.setting = data
      })
    },
    getUpload() {
      getSetting('upload').then(succ => {
        const { data } = succ
        this.$data.upload = data
      })
    }
  }
}
</script>
<style scoped>

.avatar {
  width: 200px;
}

</style>
